import {useDispatch, useSelector} from "react-redux";
import {Button} from "antd";
// import store from '@/store'
// ts中提功了ReturnType，用来获取函数类型的返回值
// type RootState = ReturnType<typeof store.getState>
import numState from '@/store/numState'

const FileList = () => {
    // 获取仓库数据-这属于状态变量
    const {num, sarr} = useSelector((state: RootState) => ({
        num: state.handleNum.num,
        sarr: state.handleArr.sarr
    }))

    // 修改仓库数据
    const dispatch = useDispatch()
    const handleAdd = () => {
        // dispatch({type: '认为是一个记号', val: 2}) type是固定的  val是自定义的
        dispatch({type: 'add1'})
        // dispatch({type: 'add2', val: 10})
    }

    const handleAsync = () => {
        // dispatch((dis: Function) => {
        //     setTimeout(() => {
        //         dis({type: 'add1'})
        //     }, 2000)
        // })
        //
        // 优化redux-thunk的异步方法
        dispatch(numState.asyncActions.asyncAdd1)
    }

    const handleArr = () => {
        dispatch({type: 'sarrpush1', val: 99})
    }
    return(
        <div>
            BlogList
            <p>{num}</p>
            <p>{sarr}</p>
            <Button onClick={handleAdd}>修改state数据</Button>
            <Button onClick={handleArr}>添加数组元素</Button>
            <Button onClick={handleAsync}>异步处理</Button>
        </div>
    )
}

export default FileList